<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<c:url var="action" value="/role/save.html" />
<form:form method="POST" commandName="role" action="${action}" id="mainForm">
	<div id="layout-main-right-content">
		<div id="dialog-form" title="用户"> <input type="hidden" name="id" id="id"
			value="${role.id}" />
			<div class="yui3-g">
			<div class="yui3-u-1-6">
			<div class="content"><label for="code">代码</label></div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content"><input type="text" name="code" id="code"
				value="${role.code}" class="text ui-widget-content ui-corner-all" />
			<form:errors path="code" cssClass="error" /></div>
			</div>
			<div class="yui3-u-1-6">
			<div class="content"><label for="name">名称</label></div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content"><input type="name" name="name" id="name"
				value="${role.name}" class="text ui-widget-content ui-corner-all" />
			<form:errors path="name" cssClass="error" /></div>
			</div>
			</div>
			<div class="yui3-g">
			<div class="yui3-u-1-6">
			<div class="content"><label for="desc">描述</label></div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content"><input type="text" name="desc" id="desc"
				value="${role.desc}" class="text ui-widget-content ui-corner-all" />
			</div>
			</div>
			<div class="yui3-u-1-6">
			<div class="content">&nbsp;</div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content">&nbsp;</div>
			</div>
			</div>
			<div class="yui3-g">
			<div class="yui3-u-1-6">
			<div class="content">创建时间</div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content"><fmt:formatDate
				pattern="yyyy-MM-dd HH:mm:ss" value="${role.createTime}" /></div>
			</div>
			<div class="yui3-u-1-6">
			<div class="content">更新时间</div>
			</div>
			<div class="yui3-u-1-3">
			<div class="content"><fmt:formatDate
				pattern="yyyy-MM-dd HH:mm:ss" value="${role.updateTime}" /></div>
			</div>
			</div>
			<div class="yui3-g">
			<div class="yui3-u-1"><input type="button" id="save" value="保存"
				class="button_selector" /> &nbsp;&nbsp;&nbsp;&nbsp; <input
				type="button" id="cancel" value="取消" class="button_selector"
				onclick="location.href='<c:url value="/role/list.html"/>'" /></div>
			</div>
		</div>

		<div id="tabs" class="ui-tabs">
		<ul class="ui-tabs-nav">
			<li class="ui-state-default"><a href="#tabs-0">角色功能</a></li>
			<li class="ui-state-default"><a href="#tabs-1">角色用户</a></li>
		</ul>
		<div id="tabs-0" class="ui-tabs-panel">
			<input type="hidden" name="menuIds" id="menuIds"/>
			<div id="jstree1">
				${mytree}
			</div>		
		</div>
		<div id="tabs-1">
			<table cellspacing="1" class="tablesorter" id="myTable">
			<thead>
				<tr>
					<th class="header">登录名</th>
					<th class="header">代码</th>
					<th class="header">姓名</th>
					<th class="header">Email</th>
					<th class="header">性别</th>
					<th class="header">状态</th>
				</tr>
			</thead>
			<tbody>
				<c:set var="i" scope="page" value="0" />
				<c:forEach var="user" items="${role.users}">
					<tr class=<c:if test="${(i % 2) == 0}">"odd"</c:if>
						<c:if test="${(i % 2) == 1}">"even"</c:if>>
						<td>${user.loginName}</td>
						<td>${user.code}</td>
						<td>${user.name}</td>
						<td>${user.email}</td>
						<td>${user.sex}</td>
						<td>${user.status}</td>
					</tr>
					<c:set var="i" scope="page" value="${i+1}" />
				</c:forEach>
			</tbody>
		</table>			
		</div>
		</div>
	</div>
</form:form>
<script type="text/javascript">
	jQuery(function($) {
		<c:if test="${not empty role.users}">
		$("#myTable").tablesorter({
			sortList : [ [ 0, 0 ] ],
			widgets : [ 'zebra' ]
		});// sort on the first column and third column, order asc 
		</c:if>
		<c:if test="${not empty role.menus}">
		$("#myTable2").tablesorter({
			sortList : [ [ 0, 0 ] ],
			widgets : [ 'zebra' ]
		});
		</c:if>

		$("#jstree1").jstree({
			"themes" : {
				"theme" : "default"
			},
			"types" : {
				"types" : {
					"root" : {
						"icon" : {
							"image" : "${ctx}/js/themes/root.png"
						}
					},
					"folder" : {
						"icon" : {
							"image" : "${ctx}/js/themes/folder.png"
						}
					},
					"file" : {
						"icon" : {
							"image" : "${ctx}/js/themes/file.png"
						}
					},
					"default" : {
						"valid_children" : [ "default" ]
					}
				}
			},
			"plugins" : [ "themes", "html_data", "types", "checkbox" ]
		});

		$("#save").click(function() {
			var checked_ids = [];
			var unchecked_ids = [];
			$("#jstree1").jstree("get_checked",null,true).each(function () {
			        checked_ids.push(this.id); 
			});
			$('#jstree1 .jstree-undetermined').each(function () {
		        var id = $(this).attr('id');
		        checked_ids.push(id); 
		    });			
			$("#jstree1").jstree("get_unchecked",null,true).each(function () {
				unchecked_ids.push(this.id); 
			});			
	        //jQuery("<input>").attr("type", "hidden").attr("name", "ids").val(checked_ids).appendTo("#jstree1");
			//alert($('input[name="ids"]').val());
			$("#menuIds").val(checked_ids);
			$("#mainForm").submit();
		})

		$("#tabs").tabs({
			select : function(event, ui) {
				return true;
			},
			show : function(event, ui) {
				if (ui.index == 1) {
					//loadRoleRole();
				} else {
					//loadRole();
				}
				return true;
			}
		});
		if ($('#id').val() == '') {
			$("#tabs").tabs("option", 'disabled', [ 1 ]);
		} else {
			$("#tabs").tabs("option", 'disabled', []);
		}

		$(".button_selector").button();

	});
</script>